<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h4>模态框-弹窗</h4>
        <button data-toggle="modal" data-target="#d1" class="btn btn-danger">打开模态框</button>
        <div id="d1" class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">姓名</div>
                    <div class="modal-body">
                        <input type="text">
                    </div>
                    <div class="modal-footer">
                        <a fref="#" class="btn btn-danger" data-dismiss="modal">关闭</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <div class="container">
        <h4>徽章-小红点</h4>
        <ul class="list-group">
            <li class="list-group-item">
                赞<a class="badge badge-danger bdage-pill" href="#">20</a>
            </li>
            <li class="list-group-item">
                赞<a class="badge badge-danger bdage-pill" href="#">20</a>
            </li>
            <li class="list-group-item">
                赞<a class="badge badge-danger bdage-pill" href="#">20</a>
            </li>
            <li class="list-group-item">
                赞<a class="badge badge-danger bdage-pill" href="#">20</a>
            </li>
        </ul>
    </div>

    <hr>

    <div class="container">
        <h4>巨幕</h4>
        <div class="jumbotron">
            Lorem ipsum dolor sit amet.
        </div>
    </div>

    <hr>

    <div class="container">
        <h4>分页</h4>
        <ul class="pagination">
            <li class="page-item">
                <input class="page-link" type="text">
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a  class="page-link"href="#">4</a>
            </li>
            <li class="page-item">
                <a  class="page-link"href="#">下一页</a>
            </li>
        </ul>
    </div>

    <hr>

    <div class="container">
        <h4>分页</h4>
        <ul class="pagination py-2 px-3" style="border: 1px solid #dee2e6;">
            <li class="page-item mx-1">
                <input class="page-link" style="border-radius: 0.5rem;" type="text">
            </li>
            <li class="page-item mx-1 active">
                <a class="page-link" hre style="border-radius: 0.5rem;"f="#">1</a>
            </li>
            <li class="page-item mx-1">
                <a class="page-link" hre style="border-radius: 0.5rem;"f="#">2</a>
            </li>
            <li class="page-item mx-1">
                <a class="page-link" hre style="border-radius: 0.5rem;"f="#">3</a>
            </li>
            <li class="page-item mx-1">
                <a  class="page-link"hre style="border-radius: 0.5rem;"f="#">4</a>
            </li>
            <li class="page-item mx-1">
                <a  class="page-link"hre style="border-radius: 0.5rem;"f="#">下一页</a>
            </li>
        </ul>
    </div>

    <hr>

    <div class="container">
        <h4>面包馅导航</h4>
        <!-- 改那个"/"为">" -->
        <style>
            .breadcrumb-item + .breadcrumb-item::before{
                content: ">";
            }
        </style>
        <!-- li里有文本 -->
        <ul class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">首页</a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">学习用品</a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">笔记本电脑</a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">AppleMac</a>
            </li>
        </ul>

    </div>

    <hr>

    <div class="container">
        <h4>进度条</h4>
        <!-- 进度条通过progress-bar的宽度调整进度 -->
        <div class="progress">
            <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 50%;"></div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 75%;"></div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width: 25%;"></div>
        </div>

    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>